<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{msg}}

      <Foo></Foo>
      <Foo></Foo>
      <Foo></Foo>
      <Bar></Bar>
    </div>
    <script>
      // 注意点
      // 1. 必须有一个 root element
      // 2. data 必须是一个函数
      // 局部注册
      const Foo = {
        template: `
          <div>
            foo
            {{count}}
            <button @click="count++">click</button>
            <Bar></Bar>
          </div>
        `,
        // 必须是一个函数
        data() {
          return {
            count: 1,
          };
        },

        // 不可以写成对象
        // data: {
        //   count: 1,
        // },

        methods: {},
      };

      // js 基础知识 引用类型
      // Foo.data -> {}
      // Foo Foo
      // Foo.data = {a:"a"}

      const Bar = {
        template: `<div>Bar</div>`,
      };

      // 全局注册
      Vue.component("Bar", Bar);

      const app = new Vue({
        el: "#app",
        // 注册 -> 引入你要用到的组件
        components: {
          Foo,
        },
        data: {
          msg: "hello ",
        },
      });
    </script>
  </body>
</html>
